<!-- 登录页面 -->
<template>
  <div class="my-login">
    <div class="my-login__left">
      <img src="../../assets/logo-white.png" />
      <h2>Hi，你好！</h2>
      <p>欢迎进入敲门入户管理平台</p>
    </div>
    <el-form :model="loginModel" ref="loginFormRef" :rules="rules" :inline="false" class="my-login__box" size="large">
      <el-form-item>
        <div class="my-login__title">
          登录
        </div>
      </el-form-item>
      <el-form-item prop="userlogin">
        <el-input placeholder="请输入用户名" v-model="loginModel.userlogin" @keyup.enter="onLogin">
          <template #prefix>
            <img style="width: 24px; height: 24px;" src="../../assets/tel.svg" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="loginModel.password" @keyup.enter="onLogin" >
          <template #prefix>
            <img style="width: 24px; height: 24px;" src="../../assets/safe.svg" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="vertCode" class="login-animation2">
        <el-input placeholder="请输入验证码" v-model="loginModel.vertCode" @keyup.enter="onLogin"
        style="width: 100%; position: relative"
        >
          <template #prefix>
            <img style="width: 24px; height: 24px;" src="../../assets/vert-code.svg" />
          </template>
        </el-input>
        <div
            :class="getCodeFlag ? 'lute1' : 'lute2'"
            @click.prevent="getCode"
            :disabled="!getCodeFlag"
          >
            {{ getCodeFlag ? '获取验证码' : codeNum + 's后重新获取' }}
          </div>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item>
        <div class="my-login__box__btn">
          <el-button class="my-login__btn" type="primary" @click="onLogin" :loading="loading" size="large">登录
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang='ts'>
import userLogin from '@/views/user/composables/login'
import { Iphone, Lock } from '@element-plus/icons-vue'
const { loginModel, rules, onLogin, loading, checked,
  getCodeFlag, getCode, codeNum } = userLogin()
</script>
<style scoped lang='scss'>
.my-login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url("../../assets/bg_login01.jpg") no-repeat top left;
  background-size: cover;
  box-sizing: border-box;
  padding: 0 10%;

  &__left {
    margin-bottom: 20vh;

    >img {
      display: block;
      margin-bottom: 10vh;
    }

    h2,
    p {
      font-size: 6vh;
      color: #fff;
      line-height: 8vh;
      font-weight: bold;
      letter-spacing: 5px;
    }

    >h2 {
      margin-bottom: 5vh;
    }

  }

  &__box {
    width: 300px;
    height: 350px;
    padding: 50px 50px;
    box-shadow: 0 0 20px #ccc;
    background: #fff;
    border-radius: 8px;

    &__btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  &__title {
    width: 100%;
    line-height: 40px;
    margin-bottom: 15px;
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: $my-color-primary;
  }

  &__btn {
    display: block;
    width: 100%;
    margin-top: 20px;
  }
  :deep(.el-input--large .el-input__icon){
    font-size: 22px;
    color: $my-color-primary;
  }
}

.lute1 {
  position: absolute;
  right: 20px;
  font-size: 12px;
  color: rgba(15, 83, 172, 1);
  cursor: pointer;
}

.lute2 {
  position: absolute;
  right: 8px;
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
}
</style>